<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>新增地址</title>
    <link href="../css.min/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/layer.css"/>
    <link rel="stylesheet" type="text/css" href="../css/animate.css"/>
   	<style type="text/css">
	    .mui-content{background-color: #fff !important;}
	   	.header-add{
	   		background-color: #FA435E !important;
	   	}
	   	.header-add a{color:#fff}
	   	.mui-title{color:#fff}
	   	/*.mui-pull-right{line-height: 43px;font-weight: bold;font-size: 18px;cursor: pointer;}*/
	   	.active{background: #FA435E;color: #fff;border: 1px solid #FA435E !important;}
	   	.mui-icon-checkmarkempty{border-radius: 50%;border: 1px solid #ccc;color: #fff;cursor: pointer;/*transition: all 2s ease-out 0s;*//*transition:  all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);*/ }
	   	.radio{text-align: center;}
	   	.radio a{color: #000;}
	   	.name{}
	   	.mui-input-row{margin-top: 20px;overflow: visible;}
	   	.mui-input-row input{box-sizing: border-box;}
	   	.mui-input-row label{width: 20%;padding: 10px 0px 10px 0px;text-align: right;}
	   	.mui-input-row input{border-bottom: 1px solid #ccc !important;border-top: 0px solid #FA435E !important;border-left: 0px solid #FA435E !important;border-right: 0px solid #FA435E !important;width: 80% !important;padding-left: 10px !important;border-radius: 0px;transition: all 1s ease-out 0s;box-shadow: 0px 0px 0px #FA435E;}
	   	.mui-input-row input:hover{
	   		border: 1px solid #F28190 !important;border-radius: 50px;
	   		box-shadow: 1px 1px 3px #FFCBD3;
	   		opacity: 0.9;
	   		/*z-index: 99999;*/
	   		/*background: #0f0;*/
	   	}
	   	.address{ }
	   	.address label{width: 20%;box-sizing: border-box;padding-right: 0 !important;}
	   	.address input{border-bottom: 1px solid #ccc;padding-left: 5px !important;box-sizing: border-box;width: 70% !important;font-size: 15px;float: left !important;}
	   	.mui-icon-location{color: #ccc;box-sizing: border-box;padding-top: 7px;float: left;}
	   	.button{position: relative;opacity: 1;}
	   	.button div{width: 95%;height: 40px;font-size: 20px;background: #FA435E;color: #fff;border: none;margin: 40px auto 0;text-align: center;line-height: 40px;float: none;border-radius: 4px;}
	   	.mui-content div{
	  	-webkit-animation-duration: 0.5s;
		}
   	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav header-add">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">新增地址</h1>  
		<!--<a class="mui-pull-right">保存</a>-->
	</header>
	<div class="mui-content">
		
		<!--<form >-->
		<div class="mui-input-row name fix">
			
		</div> 
		<div class="mui-input-row radio sex fix">
			
		</div>
		<div class="mui-input-row  phone fix"> 
			
		</div>
		<div class="mui-input-row  address fix">
				</div>
		 
		<div class="mui-input-row button fix">
			
		</div> 
		<!--</form>-->
		
	</div>
    <script src="../js.min/mui.min.js"></script>
    <script src="../js.min/zepto_1.1.6.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js.min/layer.m.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init()
	
		setTimeout(function(){
			
					setTimeout(function(){
						$('.name').append('<label>联系人:</label><input type="text" id="name" placeholder="您的姓名" autofocus="autofocus">').addClass('animated fadeInUp')
					},30)
						setTimeout(function(){
						$('.sex').append('<i class="mui-icon mui-icon-checkmarkempty" name="nan" ></i><a style="margin-right: 50px;">男生</a><i class="mui-icon mui-icon-checkmarkempty" name="nv"></i>女生').addClass('animated fadeInUp')
						},130)  
						setTimeout(function(){
						$('.phone').append('<label>手机号:</label><input type="text" id="phone" placeholder="您的手机号">').addClass('animated fadeInUp')
						},230)
						setTimeout(function(){
						$('.address').append('<label>送餐地址:</label><i class="mui-icon mui-icon-location"></i><input type="text" id="add" placeholder="您的宿舍楼及寝室号. 如 :G座 434">').addClass('animated fadeInUp')
						},330)
						setTimeout(function(){
						$('.button').append('<div class="mui-pull-right">保存</div>').addClass('animated bounceIn') 
						plusa() 
						},430) 
		
		},300);
			          
		var date = new Date().getTime();
		
		function plusa(){
			
				mui.plusReady(function(){
					var web = plus.webview.currentWebview();
					if(web['name']!= undefined){
					$('#name').val(web['name']);
		//			web['sex']
					$('#phone').val(web['phone']);
					$('#add').val(web['add'])
					}else{
		//				alert(2)
		//			alert(web['name'])
					//这是从添加进入的
					}
					
				})
				var thisName = ''
				$('.sex i').click(function(){
					$('.sex i').removeClass('active  bounceIn animated')
					$(this).addClass('active  bounceIn animated')
					var thisattr = $(this).attr('name');
					$('.mui-pull-right').attr('name',thisattr)
		//			thisName = $(this).attr('name')
				})
				
				$('.mui-pull-right').click(function(){
		//			alert(date)
		//				$('.mui-pull-right').addClass('mui-action-back');
					if($('#name').val() != '' && $(this).attr('name') != undefined && $('#add').val() != '' && $('#phone').val() != ''){
		//		alert('ok')
						plus.storage.setItem("name",$('#name').val());
						plus.storage.setItem("sex",$(this).attr('name'));
						plus.storage.setItem("address",$('#add').val());
						plus.storage.setItem("phone",$('#phone').val());
		//				plus.storage.setItem("");
		//		 my = {"name":$('#name').val(),"sex":$(this).attr('name'),"address":$('#add').val()};
		//				})
						  back()
					}else{ 
						mui.toast('您填写的信息不完整,请重新填写')
					}
					})
		}

		function back(){
			             layer.open({
						    content: '保存成功!',
						    btn: ['OK'],
						    anim: true,
						    shadeClose:false,
						    yes: function(index){
							    layer.close(index)
								 mui.currentWebview.close(); 
								 window.location.reload()
							} 
							})
				setTimeout("$('.button').addClass('animated fadeOutDown')",300) 
				setTimeout("$('.address').addClass('animated fadeOutDown')",400) 
				setTimeout("$('.phone').addClass('animated fadeOutDown')",500) 
				setTimeout("$('.sex').addClass('animated fadeOutDown')",600) 
				setTimeout("$('.name').addClass('animated fadeOutDown')",700) 
		};  

	</script>
</body>
</html>